<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Simple Layout Customizer Sample</title>
        
        <link rel="stylesheet" type="text/css" href="../css/fluid.presentation.css" />
        <link rel="stylesheet" type="text/css" href="../css/fluid.states.css" />
        <link rel="stylesheet" type="text/css" href="../css/LayoutCustomizer.css" />        
        
        <script type="text/javascript" src="../js/jquery/jquery-1.2.6.js"></script>
        <script type="text/javascript" src="../js/jquery/jARIA.js"></script>
        <script type="text/javascript" src="../js/jquery/jquery.keyboard-a11y.js"></script>
        <script type="text/javascript" src="../js/jquery/ui.core.js"></script>
        <script type="text/javascript" src="../js/jquery/ui.draggable.js"></script>
        <script type="text/javascript" src="../js/jquery/ui.droppable.js"></script>
        <script type="text/javascript" src="../js/json/json2.js"></script>
        
        <script type="text/javascript" src="../js/fluid/Fluid.js"></script>
        <script type="text/javascript" src="../js/fluid/DragManager.js"></script>
        <script type="text/javascript" src="../js/fluid/Reorderer.js"></script>
        <script type="text/javascript" src="../js/fluid/LayoutCustomizer.js"></script>
        <script type="text/javascript" src="../js/fluid/ModuleLayout.js"></script>

        <script type="text/javascript">
            // all elements (columns and sortable portlets) must have a unique ID as of Fluid 0.4
            // Can this change to either manually or automatically assigning unique identifiers/classnames (avoiding taking over the ID)?
            
            // all columns/modules must be reachable by a selctor that can be safely scoped to the container            
            // you can use any css selector pattern to find columns and modules, as long as jQuery selectors support it
            jQuery(document).ready(function () {
                /******************************************/
                // Example 1, grab by class names and id
                    fluid.reorderLayout ("#fluid-LayoutCustomizer-sample1", {
                        selectors: {
                            columns: ".myColumn",
                            modules: ".mySortable"
                        }
                    });
                
                /******************************************/
                // Example 2, different selectors
                fluid.reorderLayout ("#fluid-LayoutCustomizer-sample2", {
                    selectors: {
                        columns: "> div",
                        modules: "> div > div"                        
                    }
                });
              
              
                /******************************************/
                // Example 3, the most robust layout system with permissions and priority sorting
                // A. define layout
                var layout = {
                    id:"fluid-LayoutCustomizer-sample3",
                    columns:[
                        {id:"column_1", children:["sortable_1", "sortable_2", "sortable_3", "sortable_4"]},
                        {id:"column_2", children:["sortable_5", "sortable_6", "sortable_7", "sortable_8"]},
                        {id:"column_3", children:["sortable_9", "sortable_10", "sortable_11", "sortable_12"]}
                    ]
                };
                // B. define permissions
                // For those who are interested in this level of functionality, these numbers would be generated by a server side layout manager
                // and they would be refreshed via the callback method
                var perms = [
                  [1,1,1,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0]
                ];                
                // C. CALLBACK
                var orderChangedCallbackUrl;
                
                // D. user options
                var options;
                
                fluid.initLayoutCustomizer(layout, perms, orderChangedCallbackUrl, options);
              
            });
        </script>
	</head>
	<body>
        <h1>Example 1: A simple set of sortable elements within columns</h1>
        <p>Sortable elements are also sometimes called "portlets".</p>
        <div id="fluid-LayoutCustomizer-sample1" class="columnSetup1 fluid-vertical-order">
            <div id="col1" class="myColumn">
                <h2>Column A</h2>
                <div id="el1" class="mySortable">Drag me! Content goes here...</div>
                <div id="el2" class="mySortable">Drag me! Content goes here...</div>
                <div id="el3" class="mySortable">Drag me! Content goes here...</div>
                <div id="el4" class="mySortable">Drag me! Content goes here...</div>
            </div>
            <div id="col2" class="myColumn">
                <h2>Column B</h2>
                <div id="el6" class="mySortable">Drag me! Content goes here...</div>
                <div id="el7" class="mySortable">Drag me! Content goes here...</div>
                <div id="el8" class="mySortable">Drag me! Content goes here...</div>
                <div id="el9" class="mySortable">Drag me! Content goes here...</div>
            </div>
            <div id="col3" class="myColumn">
                <h2>Column C</h2>
                <div id="el11" class="mySortable">Drag me! Content goes here...</div>
                <div id="el12" class="mySortable">Drag me! Content goes here...</div>
                <div id="el13" class="mySortable">Drag me! Content goes here...</div>
                <div id="el14" class="mySortable">Drag me! Content goes here...</div>
            </div>
        </div>

        <h1>Example 2: Another example</h1>
        <p>Unsortable elements mixed with sortable elements, and our high contrast accessbility theme</p>        
        
        <div id="fluid-LayoutCustomizer-sample2" class="columnSetup2 -fluid-theme-highContrast fluid-vertical-order">
            <div id="unique_1">
                <h2>Column A</h2>
                <div id="unique_2">Draggable Element</div>
                <div id="unique_3">Draggable Element</div>
                <p id="unique_4">Static Content</p>
                <p id="unique_5">Static Content</p>
            </div>
            <div id="unique_6">
                <h2>Column B</h2>
                <div id="unique_7">Draggable Element</div>
                <p id="unique_8">Static Content</p>
                <p id="unique_9">Static Content</p>
                <div id="unique_10">Draggable Element</div>
            </div>
            <div id="unique_11">
                <h2>Column C</h2>
                <div id="unique_12">Draggable Element</div>
                <p id="unique_13">Static Content</p>
                <div id="unique_14">Draggable Element</div>
                <div id="unique_15">Draggable Element</div>
            </div>
        </div>

        <h1>Example 3: Complex sorting</h1>
        <p>The most robust sorting mechanism. Includes permission-based sorting with priorities.</p>
        <p> Only the first item in Column A can be dragged, and it can only be dragged down within 2 units.</p>

        <div id="fluid-LayoutCustomizer-sample3" class="columnSetup3 fluid-vertical-order">
            <div id="column_1" class="myColumn">
                <h2>Column A</h2>
                <div id="sortable_1">Content Portal</div>
                <div id="sortable_2">Content Portal</div>
                <div id="sortable_3">Content Portal</div>
                <div id="sortable_4">Content Portal</div>
            </div>
            <div id="column_2" class="myColumn">
                <h2>Column B</h2>
                <div id="sortable_5">Content Portal</div>
                <div id="sortable_6">Content Portal</div>
                <div id="sortable_7">Content Portal</div>
                <div id="sortable_8">Content Portal</div>
            </div>
            <div id="column_3" class="myColumn">
                <h2>Column C</h2>
                <div id="sortable_9">Content Portal</div>
                <div id="sortable_10">Content Portal</div>
                <div id="sortable_11">Content Portal</div>
                <div id="sortable_12">Content Portal</div>
            </div>
        </div>
                
	</body>
</html>

